<!--
 * @Author: wb_wangjiudeng wb_wangjiudeng@tcl.com
 * @Date: 2025-05-25 17:51:39
 * @LastEditors: wb_wangjiudeng wb_wangjiudeng@tcl.com
 * @LastEditTime: 2025-05-25 18:58:43
 * @FilePath: \iam-ui\src\views\disciplinary\workOrder\components\AssetDrawer.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <common-drawer
    :visible="visible"
    :title="drawerTitle"
    :size="800"
    :destroy-on-close="true"
    @update:visible="emit('update:visible', $event)"
    @close="handleClose"
  >
    <div class="info">
      <div class="info-item">
        <span class="label">工单类型：</span>
        <span class="value">{{ assetData?.source }}</span>
      </div>
      <div class="info-item">
        <span class="label">联系电话：</span>
        <span class="value">{{ assetData?.source }}</span>
      </div>
      <div class="info-item">
        <span class="label">工单主题：</span>
        <span class="value">{{ assetData?.source }}</span>
      </div>
      <div class="info-item">
        <span class="label">督办单位：</span>
        <div class="value">
          <el-select
            v-model="superviseUnit"
            placeholder="请选择"
            style="width: 240px"
          >
            <el-option
              v-for="item in superviseUnitList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </div>
      <div class="info-content">
        <div class="label">工单描述：</div>
        <div style="margin-top: 10px">
          <el-input
            v-model="description"
            style="width: 100%"
            :rows="6"
            type="textarea"
            placeholder="请输入内容"
          />
        </div>
      </div>
      <div class="options">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleSubmit">督办</el-button>
      </div>
    </div>
  </common-drawer>
</template>

<script setup>
import { onMounted } from "vue";
import CommonDrawer from "@/components/CommonDrawer.vue";

const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
  },
  type: {
    type: String,
    required: true,
    validator: (value) => ["view", "reply"].includes(value),
  },
  assetData: {
    type: Object,
    required: true,
    default: () => ({}),
  },
});
const emit = defineEmits(["update:visible"]);

const superviseUnit = ref("一社区");
const superviseUnitList = [
  {
    value: "一社区",
    label: "一社区",
  },
  {
    value: "二社区",
    label: "二社区",
  },
  {
    value: "一科室",
    label: "一科室",
  },
  {
    value: "二科室",
    label: "二科室",
  },
];
const description = ref("");

onMounted(() => {
  console.log("========");
});

// 抽屉标题
const drawerTitle = computed(() => {
  const titles = {
    view: "工单详情",
    reply: "工单回复",
    supervise: "工单督办",
  };
  return titles[props.type] || "";
});
// 关闭抽屉
const handleClose = () => {
  emit("update:visible", false);
};
const handleSubmit = () => {
  console.log("submit");
};
</script>

<style lang="scss" scoped>
.info {
  &-item {
    display: flex;
    align-items: center;
    margin-bottom: 16px;

    .label {
      width: 80px;
      color: #606266;
    }

    .value {
      flex: 1;
    }
  }
  &-content {
    .label {
      width: 80px;
      color: #606266;
    }
  }
  .options {
    margin-top: 16px;
    display: flex;
    justify-content: center;
  }
}
</style>
